<!--
 * @Author: hu_binbin
 * @Date: 2021-08-19 09:51:10
 * @LastEditTime: 2021-08-20 11:22:22
 * @Description: 隐患筛选
-->

<template>
    <div>
        <div class="title">筛选</div> 
        <div class="row sub">
            <span>变电站名称</span>
            <div class="search">
                <van-search v-model.trim="subName" clearable @input="focus" shape="round" background="#F5F6FA" placeholder="搜索变电站">
				</van-search> 
            </div>
        </div>
        <div class="row">
            <span>隐患性质</span>
            <div class="cycle-time">
                <div>全部</div>
                <div>一般隐患</div>
                <div>重点隐患</div>
                <div>安全事件</div>
            </div>
        </div>
        <div class="row">
            <span>隐患状态</span>
            <div class="work-type">
                <div>全部</div>
                <div>登记隐患</div>
                <div>班组审核</div>
                <div>预评估定级</div>
                <div>专业定级</div>
                <div>隐患处理</div>
                <div>隐患验收</div>
            </div>
        </div>
        <div class="row">
            <span>是否已治理</span>
            <div class="work-type">
                <div>全部</div>
                <div>未治理</div>
                <div>已治理</div>
            </div>
        </div>
        <div class="row">
            <span>登记时间</span>
            <div class="time">
                <div>
                    <span>2021/03/20</span>
                    <van-icon name="calendar-o" />
                    <!-- <van-image  width="34" height="47" @click="openTime" :src="icon.rfid" /> -->
                </div>
                <div>
                    <span>2021/03/20</span>
                    <van-icon name="calendar-o" />
                    <!-- <van-image  width="34" height="47" @click="openTime" :src="icon.rfid" /> -->
                </div>
            </div>
        </div>
        <div class="btn">
            <van-button style="width: 40%;" plain  color="#0EB295" type="primary" size="small">重置</van-button>
            <van-button style="width: 40%;"  color="#0EB295" type="primary" size="small">完成</van-button>
        </div>
    </div>
</template>

<script>
export default {
name:"dangerScreen",
props: {
},
data() {
    return {
        subName: "",
        icon: {
            
        },
    }
},
methods: {
    openTime() {

    },
    focus() {

    }
},
};
</script>

<style scoped>
    .title{
        text-align: center;
        margin: 1rem 0.5rem;
        font-size: 15px;
        color: #333;
    }
    .row{
        margin: 10px;
        color: #333;
        font-size: 15px;
    }
    .search{
        margin-top: 10px;
    }
    .cycle-time,.work-type{
        margin: 0.5rem 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .cycle-time div{
        color: #666;
        width: 25%;
        padding: 0.3rem;
        margin: 0.3rem;
        background: #F0F0F0;
        text-align: center;
        font-size: 13px;
    }
    .work-type div{
        width: 25%;
        padding: 0.3rem;
        margin: 0.3rem;
        background: #F0F0F0;
        text-align: center;
        font-size: 13px;
        color: #666;
    }
    .time{
        display: flex;
        align-items: center;
        margin: 0.5rem 0;
        justify-content: space-between;
    }
    .time div{
        width: 45%;
        margin: 0.3rem 0.3rem;
        padding: 0.3rem;
        background: #F0F0F0;
        display: flex;
        align-self: center;
        justify-content: space-between;
        color: #666;
    }
    .btn{
        bottom: 0px;
        margin:0.5rem;
        width: calc(100% - 1rem);
        position: fixed;
        display: flex;
        justify-content:space-around;
    }
    /deep/ .van-search {
        height: 30px;
    }
</style>